<template>
  <div class="all">
    <div class="title">
      <div>{{ title }}</div>
      <div>
        <el-button v-if="data.status === '待维修' && cmCanBegin === 2 && roles.includes('WorkOrderCmUpdate')" type="success" icon="el-icon-check" @click="start">开始执行</el-button>
        <el-button v-if="data.status === '维修中' && cmCanBegin === 2 && roles.includes('WorkOrderCmUpdate')" type="primary" icon="el-icon-circle-check" @click="monitor">请求班长审核</el-button>
        <el-button v-if="data.status === '待班长审核' && cmCanMonitor === 2 && roles.includes('WorkOrderPmMonitor')" type="primary" icon="el-icon-circle-check" @click="engineer(2)">请求工程师审核</el-button>
        <el-button v-if="data.status === '待班长审核' && cmCanMonitor === 2 && roles.includes('WorkOrderPmMonitor')" type="danger" icon="el-icon-circle-close" @click="engineer(1)">驳回</el-button>
        <el-button v-if="data.status === '待工程师审核' && cmCanEngineer === 2 && roles.includes('WorkOrderPmEngineer')" type="success" icon="el-icon-circle-check" @click="engineerSubmit(2)">工程师审核</el-button>
        <el-button v-if="data.status === '待工程师审核' && cmCanEngineer === 2 && roles.includes('WorkOrderPmEngineer')" type="primary" icon="el-icon-circle-close" @click="engineerSubmit(1)">驳回</el-button>
        <el-button v-if="data.status === '待确认' && cmCanConfirm === 2 && roles.includes('WorkOrderCmConfirm')" type="success" icon="el-icon-circle-check" @click="cmConfirm">现场人员确认</el-button>
        <el-button type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
        <el-button v-if="roles.includes('WorkOrderCmDelete')" type="danger" icon="el-icon-delete" @click="delBtn">删除</el-button>
        <el-button v-if="data.status === '完成' && cmCanEngineer === 2" type="primary" icon="el-icon-document-checked" @click="submitForm('form')">保存</el-button>
      </div>
    </div>
    <div class="detail-mid">
      <el-form ref="form" v-loading="loading" :model="data" :rules="rules" inline>
        <el-row>
          <el-col :span="4">
            <el-form-item label="设备：">
              <el-input v-model="data.equipment_name" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否停机：" prop="halt">
              <SelfSelect v-model="data.halt" :show-list="YN" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="专业：" prop="profession">
              <SelfSelect v-model="data.profession" :show-list="planSpecial" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="确认时间：">
              <el-input v-model="data.complete_time" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="工单来源：" prop="from_type">
              <el-input v-model="data.from_type" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态：">
              <el-input v-model="data.status" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="车间：">
              <el-input v-model="data.workshop" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="生产线：">
              <el-input v-model="data.line" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="工位：">
              <el-input v-model="data.process" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="维修人员提交时间：">
              <el-input v-model="data.submit_complete" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="负责人：">
              <el-input v-model="data.admin" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="报修人：">
              <el-input v-model="data.create_admin" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="故障模式：" prop="error_code_id">
              <Selects v-model="data.error_code_id" action="errorCodeList" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="开始执行人：">
              <el-input v-model="data.admin" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-if="roles.includes('WorkOrderCmUpdate')" class="detail-bottom">
      <el-tabs>
        <el-tab-pane label="描述">
          <el-row v-if="editId" :gutter="20" style="padding: 2px">
            <el-col :span="4">
              <div>
                <p>创建时间日期</p>
                <el-input clearable v-model="data.create_time" readonly />
              </div>
              <div>
                <p>创建人</p>
                <el-input clearable v-model="data.create_admin" readonly />
              </div>
              <div v-if="data.update_time">
                <p>最近更新</p>
                <el-input clearable v-model="data.update_time" readonly />
                <p>更新者</p>
                <el-input clearable v-model="data.update_admin" readonly />
              </div>
            </el-col>
            <el-col :span="16">
              <TinyMce v-model="data.content" />
            </el-col>
            <el-col class="upload" :span="4">
              <Adjunct :pk="editId" table="cm" />
            </el-col>
          </el-row>
          <el-row v-if="!editId" :gutter="20" style="padding: 2px">
            <el-col :span="24">
              <TinyMce v-model="data.content" />
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane v-if="editId && data.status === '完成'" label="原因分析及整改对策">
          <div class="detail-mid">
            <el-form ref="form" :model="data" :rules="rules" inline>
              <el-row>
                <el-col :span="4">
                  <el-form-item label="编号：">
                    <el-input clearable v-model="data.equipment_coding" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="设备：">
                    <el-input clearable v-model="data.equipment_name" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="规格型号：">
                    <el-input clearable v-model="data.equipment_spec" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="制造厂家：">
                    <el-input clearable v-model="data.equipment_manufacturer" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="报修时间：">
                    <el-input clearable v-model="data.create_time" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="开始执行时间：" prop="arrange_time">
                    <el-date-picker
                      v-model="data.arrange_time"
                      type="datetime"
                      placeholder="选择日期时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      default-time="12:00:00"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="维修工提交时间：">
                    <el-date-picker
                      v-model="data.submit_complete"
                      type="datetime"
                      placeholder="选择日期时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      default-time="12:00:00"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="审核班长：">
                    <el-input clearable v-model="data.monitor" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="班长审核时间：">
                    <el-date-picker
                      v-model="data.monitor_time"
                      type="datetime"
                      placeholder="选择日期时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      default-time="12:00:00"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="工程师：">
                    <el-input clearable v-model="data.engineer" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="工程师审核时间：">
                    <el-date-picker
                      v-model="data.engineer_time"
                      type="datetime"
                      placeholder="选择日期时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      default-time="12:00:00"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="停线时间：">
                    <el-input clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="维修工时：">
                    <el-input clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="维修部位：">
                    <el-input clearable v-model="data.part" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="问题描述：">
                  <el-input style="width: 84vw" type="textarea" :rows="5" placeholder="请输入内容" v-model="data.question">
                  </el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="维修措施：">
                  <el-input style="width: 84vw" type="textarea" :rows="5" placeholder="请输入内容" v-model="data.measure">
                  </el-input>
                </el-form-item>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="editId" label="所需备件">
          <div class="detail-table">
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.parts_lists">
              <el-table-column prop="parts.name" label="备件-编号" align="left" width="300">
                <template slot-scope="scope">
                  <p :style="scope.row.style">{{ scope.row.parts.name }}-{{ scope.row.parts.coding }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="get_time" label="领取时间" align="left" width="300" />
              <el-table-column prop="number" label="数量" align="left">
                <template slot-scope="scope">
                  <el-input v-show="scope.$index === partsIndex" v-model="editNumber" clearable style="width: 30%" />
                  <p v-show="scope.$index !== partsIndex">{{ scope.row.number }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="parts.unit" label="单位" align="left" />
              <el-table-column prop="remark" label="备注" align="left" />
              <el-table-column label="操作" align="left" width="120">
                <template scope="scope">
                  <div>
                    <el-button v-if="scope.$index !== partsIndex" size="small" type="text" @click="editPartsTable(scope)">编辑</el-button>
                    <el-button v-else size="small" type="text" @click="savePartsTable(scope)">保存</el-button>
                    <el-button class="delBtn" type="text" size="small" @click="partsDel(scope.row.id)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-form ref="From" :model="data" inline>
              <el-row style="margin-top: 12px">
                <el-col :span="5">
                  <el-form-item>
                    <Selects v-model="parts_id" action="partsList" :query="{ add_field: 'coding' }" />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item>
                    <el-input clearable disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item>
                    <el-input clearable v-model="number" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item>
                    <el-input clearable disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item>
                    <el-input clearable v-model="remark" />
                  </el-form-item>
                </el-col>
                <el-col :span="1">
                  <el-button icon="el-icon-upload2" @click="partsSubmit" />
                </el-col>
              </el-row>
              <el-button type="primary" @click="requestParts">请求备件</el-button>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import API from '@/api/workorder/cm'
import SelfSelect from '@/components/select-o'
import TinyMce from '@/components/Tinymce/index'
import Cookies from 'js-cookie'
import Selects from '@/components/select-search'
import Adjunct from '@/components/Upload/adjunct'
import { cmErrorCode, YN, planSpecial } from '@/utils/option'
import { mapGetters } from 'vuex'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update'],
  components: {
    SelfSelect,
    TinyMce,
    Selects,
    Adjunct
  },
  data() {
    return {
      data: {},
      editId: null,
      title: '',
      YN,
      cmErrorCode,
      planSpecial,
      token: null,
      partsIndex: null,
      parts_id: null,
      number: null,
      remark: null,
      editNumber: null,
      editRemark: null,
      editPartsId: null,
      cmCanBegin: null,
      cmCanMonitor: null,
      cmCanEngineer: null,
      cmCanConfirm: null,
      loading: true,
      rules: {
        halt: { required: true, message: '请输入是否停机', trigger: 'change' },
        profession: { required: true, message: '请选择专业', trigger: 'change' },
        error_code_id: { required: true, message: '请选择故障模式', trigger: 'change' }
      }
    }
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.title = '报修工单详情'
      this.editId = edit
      this.info()
    } else {
      this.loading = false
      this.title = '新增报修工单管理'
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  methods: {
    goBack() {
      this.$router.push('/workorder/cm')
    },
    info() {
      console.log(this.roles)
      API.getOne(this.editId).then(res => {
        this.data = res.data
        this.getToken()
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    start() {
      const startData = {
        id: this.editId,
        profession: this.data.profession,
        error_code_id: this.data.error_code_id,
        halt: this.data.halt
      }
      API.startCm(startData).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('操作成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    monitor() {
      API.toMonitor({ id: this.editId }).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('操作成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    engineer(status) {
      const data = {
        status: status,
        id: this.editId
      }
      API.toEngineer(data).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('操作成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    engineerSubmit(status) {
      const data = {
        status: status,
        id: this.editId
      }
      API.engineerConfirm(data).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('操作成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    cmConfirm() {
      API.applyConfirm({ id: this.editId }).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('操作完成')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    getToken() {
      this.token = Cookies.get('Admin-Token')
      this.getRole()
    },
    getRole() {
      API.getInfo({ token: this.token }).then(res => {
        this.cmCanBegin = res.data.cmCanBegin
        this.cmCanMonitor = res.data.cmCanMonitor
        this.cmCanEngineer = res.data.cmCanEngineer
        this.cmCanConfirm = res.data.cmCanConfirm
        // console.log(this.cmCanBegin, this.cmCanMonitor, this.cmCanEngineer, this.cmCanConfirm)
      })
    },
    submitForm() {
      if (this.editId) {
        this.update(API, this.data, this.$refs['form'], '/workorder/cm')
      } else {
        this.add(API, this.data, this.$refs['form'], '/workorder/cm/edit/')
      }
    },
    editPartsTable({ $index, row }) {
      // 获取当前点击行下标
      this.partsIndex = $index
      this.editPartsId = row.parts_id
      this.editNumber = row.number
      this.editRemark = row.remark
    },
    savePartsTable({ row }) {
      this.partsIndex = null
      const partsData = {
        id: row.id,
        number: this.editNumber
        // price: parseInt(this.editPrice)
      }
      API.editParts(partsData).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('更新成功')
        }
      }).finally(() => {
        this.info()
      })
    },
    partsDel(id) {
      API.removeParts(id).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('删除成功')
        }
      }).finally(() => {
        this.info()
      })
    },
    partsSubmit() {
      const partsData = {
        workorder_id: this.editId,
        parts_id: this.parts_id,
        number: this.number,
        remark: this.remark
      }
      API.appendParts(partsData).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('新增成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    requestParts() {
      API.requestParts({ id: this.editId }).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('请求成功，请去库房领取')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    delBtn() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.editId
        API.delete(id).then(res => {
          if (res.data.error_code !== 1) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success('删除成功')
            this.goBack()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

